<template>
  <div>
    <div class="msgbox">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadMsgList">
        <div class="item" v-for="(item,index) in msgList" :key="index">
          <div class="time">{{item.createTime}}</div>
          <div class="content">
            <div class="name">{{item.msgTitle}}</div>
            <div class="txt">
              {{item.msgContent}}
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import { getValue } from '@/utils/auth'

import { messageRecord, messageHandle } from '@/api/record.js'
import { List } from 'vant'
export default {
  components: {
    [List.name]: List
  },
  data() {
    return {
      params: {
        page: 1,
        perPage: 10,
        houseInfoId: getValue('fzmHourseId')
      },
      msgList: [],
      loading: false,
      finished: false
    }
  },

  mounted() {
    this.loadUnMsgList()
  },
  methods: {
    // done: 加载消息列表
    loadMsgList() {
      // 加载所有
      messageRecord(this.params).then(res => {
        if (res.status === 0) {
          this.msgList = this.msgList.concat(res.data.rows)
          this.loading = false
          this.finished = res.data.rows.length < this.params.perPage
          if (!this.finished) {
            this.params.page += 1
          }
        }
      })
    },
    // done:加载未读列表，拿到未读id
    loadUnMsgList() {
      console.log(getValue('fzmHourseId'))
      messageRecord({ page: 1, perPage: 999, houseInfoId: getValue('fzmHourseId'), msgStatus: 0 }).then(res => {
        if (res.status === 0) {
          const datas = res.data.rows
          const ids = datas.map(ele => ele.id).toString()
          ids && this.handleMsg(ids)
        }
      })
    },
    // done: 消息处理
    handleMsg(ids) {
      messageHandle({ ids }).then(res => {
        if (res.status === 0) {
          console.log(res)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.msgbox {
  padding: 15px;
  .item {
    margin-bottom: 15px;
    .time {
      text-align: center;
      color: #999999;
      font-size: 13px;
      margin-bottom: 15px;
    }
    .content {
      background: #ffffff;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      padding: 12px 16px;
      margin-bottom: 10px;
      .name {
        font-size: 15px;
        color: #333333;
        margin-bottom: 10px;
      }
      .txt {
        color: #666666;
        font-size: 13px;
        text-align: justify;
      }
    }
  }
}
</style>
